<template>
    <view class="page">
        <view class="content">
            <view class="card" v-for="(item,index) in list">
                <view class="info" @click="details(item)">
                    <view>
                        <image class="imageBox" v-if="item.room_img" :src="item.room_img[0]" mode=""></image>
                        <image class="imageBox" v-else :src="item.join_public_img[0]" mode=""></image>
                    </view>
                    <view class="desc">
                        <view class="line" style="flex-wrap: wrap">
                            <text style="font-size: 17px;font-weight: 500">{{item.title}}</text>
                        </view>

                        <!--<view class="line" style="flex-wrap: wrap">-->
                            <!--<text style="color: #c0c4cc;font-size: 14px">1栋1单元101-RoomA</text>-->
                        <!--</view>-->

                        <view class="line">
                            <!--<view class="tag" v-for="(item,index) in data.public_special_info" v-if="index <= 3">-->
                            <view class="tag">
                                <u-tag v-if="item.type===1" text="精品公寓" plain size="mini"></u-tag>
                                <u-tag v-if="item.type===2" text="分散式合租" plain size="mini"></u-tag>
                                <u-tag v-if="item.type===3" text="分散式整租" plain size="mini"></u-tag>
                            </view>
                            <view class="tag">
                                <u-tag text="电子合同" plain size="mini"></u-tag>
                            </view>
                        </view>
                        <view class="price">
                            <text style="font-size: 18px;color: #ffaa00;font-weight: 600;">{{item.rent_money}}</text>
                            <text style="margin-left: 10rpx;color: #ffaa00;">元/月</text>
                        </view>
                    </view>
                </view>
                <view class="action">
                    <view>
                        <text style="color: #909193;font-size: 15px">{{item.status}}</text>
                    </view>
                    <view class="line">
                        <view class="tag">
                            <u-tag text="查看账单" type="primary" shape="circle" plain @click="goPayment(item)"></u-tag>

                        </view>
                        <view class="tag">
                            <!--<u-tag text="立即评价" type="warning" shape="circle" plain></u-tag>-->
                            <u-tag :text="parseInt(item.confirm)===0?'确认租约' : '查看租约'" type="warning"  shape="circle" plain @click="goConfirm(item.id,item.confirm)"></u-tag>
                        </view>
                    </view>
                </view>
            </view>
            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"lease",
        data() {
            return {
                list:[],
                page: {
                    count: 1,
                    size: 10,
                    current: 1,
                },
                userInfo: uni.getStorageSync('userInfo')
            };
        },
        onLoad(){
            if (this.userInfo.mobile === '' || this.userInfo.mobile === null){
                uni.showToast({
                    title: '还未设置手机号',
                    duration: 2000,
                    icon: "error",
                    success:function () {
                        uni.navigateTo({url:'/pages/user/my/login'});
                    }
                });
            } else{
                let params = {u_id: uni.getStorageSync('u_id'), tel: this.userInfo.mobile, p: this.page.current};
                this.getLeaseList(params);
            }
        },
        onShow(){
            let userInfo = uni.getStorageSync('userInfo');
            if (!userInfo.mobile) {
                uni.navigateTo({url:'/pages/user/my/login'});
            }
        },
        onReachBottom() {
            if (this.page.count > this.page.current) {
                let params = {u_id: uni.getStorageSync('u_id'), tel: uni.getStorageSync('tel'), p: this.page.current++};
                this.getLeaseList(params,true);
            }
        },
        methods:{
            details(item){
                let data = {
                    up_id : item.id,
                    title : item.title,
                    type : item.type,
                    rent_money : item.rent_money,
                    thumbnail: item.room_img.length > 0 ? item.room_img[0] : item.join_public_img[0]
                };
                uni.navigateTo({url: '/pages/user/my/detail' + uni.$u.queryParams(data)});
            },
            goPayment(item){
                let params = {
                    id: item.id,
                    title : item.title,
                    rent_money : item.rent_money,
                };
                uni.redirectTo({url:'/pages/user/my/payment' + uni.$u.queryParams(params)});
            },
            goConfirm(id,confirm){
                let params = {id: id, is_confirm: confirm};
                uni.navigateTo({url:'/pages/user/my/confirm' + uni.$u.queryParams(params)});
            },

            getLeaseList(params, append = false) {
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/my_contract' + uni.$u.queryParams(params),).then(res => {
                    uni.hideLoading();
                    if (append) {
                        for (let i = 0; i < res.data.length; i++) {
                            this.list.push(res.data);
                        }
                    }else{
                        this.list = res.data;
                    }

                    this.page.count = res.total;
                    this.page.size = res.per_page;
                    this.page.current = res.current_page;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }

    .content {
        /*padding: 20rpx;*/
    }

    .card{
        padding: 20rpx;
        background-color: #ffffff;
        margin-bottom: 20rpx;
    }

    .info{
        @include flex(row);
        justify-content: flex-start;
        border-bottom: 1rpx solid #f3f4f6;
        padding-bottom: 10rpx;
    }

    .line{
        @include flex(row);
        justify-content: flex-start;
        margin-bottom: 10rpx;
    }

    .desc{
        @include flex(column);
    }

    .imageBox{
        width: 300rpx;
        height: 220rpx;
        border-radius: 15rpx;
        margin-right: 30rpx;
    }
    .tag{
        margin-right: 20rpx;
    }

    .action{
        @include flex(row);
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
    }
</style>
